<script setup>
import { getPayList } from '../../api/pay'
import { ref, onMounted } from 'vue'
const list = ref([]) //声明渲染列表
const form = ref({
  page: '1',
  pageSize: '10'
})
const getPayListAPI = async (form) => {
  const { data } = await getPayList(form)
  //   console.log(data)
  list.value = data.rows
  total.value = data.total
}
onMounted(() => {
  getPayListAPI(form.value)
}) //挂载阶段调用获取列表的方法
const columns = [
  { title: '序号', dataIndex: 'serialNum' },
  { title: '车牌号码', dataIndex: 'carNumber', name: 'carNumber' },
  { title: '收费类型', dataIndex: 'chargeType', name: 'chargeType' },
  { title: '停车总时长', dataIndex: 'parkingTime', name: 'parkingTime' },
  { title: '缴纳费用(元)', dataIndex: 'actualCharge', name: 'actualCharge' },
  { title: '缴纳状态', dataIndex: 'paymentStatus', name: 'paymentStatus' },
  { title: '缴费方式', dataIndex: 'paymentMethod', name: 'paymentMethod' },
  { title: '缴费时间', dataIndex: 'paymentTime', name: 'paymentTime' }
]
const total = ref()
//切换分页
const onChange = (current, val) => {
  console.log(current, val)
  form.value.pageSize = val
  form.value.page = current
  getPayListAPI(form.value)
}
//查询功能
const btnSearch = () => {
  form.value.page='1'
  getPayListAPI(form.value)
}
</script>
<template>
  <div class="container">
    <div class="container-app">
      <a-form>
        <a-row>
          <a-col :span="6">
            <a-form-item label="车牌号码：" style="margin-right: 20px">
              <a-input v-model:value="form.carNumber" placeholder="请输入车牌号码"></a-input>
            </a-form-item>
          </a-col>
          <a-col :span="6">
            <a-form-item label="缴纳状态：" style="margin-right: 20px">
              <a-select style="width: 100%" placeholder="未选择" v-model:value="form.paymentStatus">
                <a-select-option value="">全部</a-select-option>
                <a-select-option value="0">未缴纳</a-select-option>
                <a-select-option value="1">已缴纳</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col>
            <a-button type="primary" @click="btnSearch">查询</a-button>
          </a-col>
        </a-row>
        <a-divider />
      </a-form>
      <a-table :dataSource="list" :columns="columns" :pagination="false" size="small">
        <template #bodyCell="{ column, text, index }">
          <template v-if="column.dataIndex === 'paymentStatus'">
            {{ text === 0 ? '未缴纳' : '已缴纳' }}
          </template>
          <template v-if="column.dataIndex === 'serialNum'">
            {{ (form.page - 1) * form.pageSize + index + 1 }}
          </template>
          <template v-if="column.dataIndex === 'chargeType'">
            {{ text === 'card' ? '月卡' : '临时停车' }}
          </template>
          <template v-if="column.dataIndex === 'paymentMethod'">
            <span v-if="text === 'Alipay'">支付宝</span>
            <span v-else-if="text === 'WeChat'">微信</span>
            <span v-else-if="text === null">--</span>
            <span v-else>线下</span>
          </template>
        </template>
      </a-table>
      <a-row type="flex" justify="end">
        <a-pagination
          size="small"
          v-model:current="form.page"
          v-model:page-size="form.pageSize"
          :total="total"
          :show-total="(total) => `共 ${total} 条`"
          :show-size-changer="['10', '20', '50', '100']"
          @change="onChange"
        />
      </a-row>
    </div>
  </div>
</template>
<style lang="less" scoped>
.container {
  height: 100%;
  padding: 0 1.3333vw;
}
.container-app {
  background-color: #fff;
  padding: 10px 20px;
}
.ant-divider {
  margin-top: 0;
}
</style>
